CSS動畫和過渡是網頁設計中常用的技巧，用於使網頁元素在狀態改變時呈現出平滑的過渡效果或實現更為複雜的動畫效果。這兩者在提升用戶體驗和視覺效果方面都有重要作用。
一、CSS過渡(Transitions)
CSS 過渡可以讓一個元素從一個狀態平滑地過渡到另一個狀態，例如改變顏色、大小或位置等。
property：指定要過渡的 CSS 屬性，如 width, color, opacity 等。也可以使用all來指定所有屬性。
duration：過渡持續的時間，如0.5s或300ms。
timing-function：定義過渡效果的速度曲線，比如ease,linear,ease-in-out等。
delay：過渡開始前的延遲時間，如0s或1s。
• 背景顏色會在 0.3s 內平滑地從藍色過渡到深藍色。
• 按鈕大小會稍微放大（scale(1.1)），使其在視覺上更具吸引力。
1.3.應用場景
過渡效果通常用於：
按鈕：當用戶懸停或點擊時，改變背景顏色或大小，提供反饋。
導航欄：當滑動到特定位置時，改變導航欄的背景或文字顏色。
卡片效果：滑過卡片時，放大或改變陰影效果。
二、CSS動畫(Animations)
CSS動畫允許創建更加複雜的動態效果，它不僅能夠控制單個狀態之間的轉換，還能定義多個狀態及其變化過程。
2.1. 基本語法
CSS動畫由兩部分組成：
@keyframes：用於定義動畫的不同狀態及其過渡過程。
animation屬性：用於應用動畫到具體的元素上。
name：動畫名稱，與 @keyframes 中定義的動畫名稱一致。
duration：動畫持續時間，如2s。
timing-function：動畫的速度曲線，如ease, linear。
delay：動畫開始前的延遲時間，如1s。
iteration-count：動畫播放次數，如infinite（無限次），或1、2（具體次數）。
direction：動畫播放方向，如 normal, reverse, alternate。